<template>
    <div>
      <van-nav-bar @click-left="$router.go(-1)" title="品类" left-text="" left-arrow />
      <van-row>
        <van-col span="6">
          <div style="float: left">
            <van-sidebar v-model="activeKey">
              <van-sidebar-item v-for="arr in categorys" :title="arr.teamName" :key="arr.teamId" @click="onChange(arr.teamId)"/>
            </van-sidebar>
          </div>
        </van-col>

        <van-col span="18">
          <div v-for="value in rentalList" :key="value.rentalId" @click="toDetails(value.rentalId)">
            <van-card
              style="background-color: seashell"
              :price=value.rentalPrice
              :desc=value.rentalRegion
              :title=value.rentalName
              :thumb="value.rentalUrlAl"
            />
          </div>

        </van-col>
      </van-row>



<!--      <div class="material-category-content">-->
<!--        <div class="material-category-contents">-->
<!--          <van-grid :gutter="13">-->
<!--            <van-grid-item v-for="value in rentalList" :key="value.rentalId" @click="categoryDetails(value.rentalId,value.rentalName)">-->
<!--              <van-image :src="value.rentalUrlAl" fit="cover" width="10.5rem" height="10.5rem"></van-image>-->
<!--              <p style="font-size: 0.6rem;padding-top: 0.4rem">{{value.rentalName}}</p>-->
<!--            </van-grid-item>-->
<!--          </van-grid>-->
<!--        </div>-->
<!--      </div>-->




    </div>
</template>

<script>
  import {
    getLeaseList,
    selectRentalServiceList,selectRentalServiceListOne,selectRentalServiceListTwo
  } from '@/api/constructionTeam/rental.js'
    export default {
        name: "lease_category",
      data(){
          return{
            activeKey:0,
            categorys: [],
            rentalList:[],
          }
      },
      created() {
        this.getList();
      },

      methods:{

        toDetails(rentalId){
          this.$router.push({path:"/RentalDetails",query:{rentalId:rentalId}});
        },

        onChange(index) {
          selectRentalServiceList(index).then((res) => {
            this.rentalList = res.data.data;
          });
        },


        getList(){
          getLeaseList().then((res) => {
            this.categorys = res.data.data;
          });
        },


      }

    }
</script>

<style scoped>

</style>
